<template>
	<view class="content">
		<menghnMap @regionchange="regionchange" @navigation="navigation" @markertaptap="markertaptap" :amongList="amongList"
			:markers="markersList" :latitude="parseFloat(latitude)" :longitude="parseFloat(longitude)" :showOper="showOper"/>
	<Tabbar cureentPage='map'></Tabbar>
	</view>
</template>

<script>
	import Tabbar from '@/components/common/Tabbar.vue'
	import request from "../../api/request";
	import menghnMap from '@/components/menghn-map/menghn-map'
	export default {
		components: {
			menghnMap,
			Tabbar
		},
		data() {
			return {
				latitude: String,
				longitude: String,
				scrollTimer: null,
				showOper:false,
				markersList: [],
				amongList:{},
			}
		},
		onLoad() {
			let _this = this;
			uni.getLocation({
				type: 'gcj02', //返回可用于uni.openLocation的经纬度
				success: function(res) {
					console.log('我的位置',res)
					_this.latitude = res.latitude;
					_this.longitude = res.longitude;
					// 将经纬度传递给getNearby方法
					_this.getNearby(_this.latitude, _this.longitude);
				},
				fail: function(err) {
					console.log(err)
				}
			})
		},
		methods: {
			getNearby(latitude, longitude){
				request({
					url: '/kx/Devicelocation/nearby',
					data:{
						longitude:longitude,
						latitude:latitude,
						// distance:'',
					},
					successCb: (res) => {
						this.markersList = res.data.map(item => ({
						    id: item.id,
						    longitude: item.longitude,
						    latitude: item.latitude,
						    status: item.status,
						    title: item.device_name,
						    iconPath: 'https://kx.taipingkeji.com/upload/1/common/images/20231218/20231218101050170290865010616.png',
						    width: 35,
						    height: 35,
						  }));
					},
				});
			},
			getDetail(id){
				request({
					url: '/kx/Devicelocation/detail',
					data:{id:id},
					successCb: (res) => {
						this.amongList = res.data;
					},
				});
			},
			regionchange(e) {//移动地图触发
			if (this.scrollTimer != null) {//节流
				clearTimeout(this.scrollTimer);
			}
			this.scrollTimer = setTimeout(() => {
				if (e.type == 'end' && e.causedBy == 'drag') {
				console.log('地图移动了');
				}
			}, 500)
			},
			//点击地图上的标注气泡时触发的事件
			navigation(e) {
			},
			//点击地图上的标记点时触发的事件
			markertaptap(e) {
				this.showOper = !this.showOper;
				this.getDetail(e.mp.detail.markerId);
			},

		}
	}
</script>

<style scoped>
	button{
		z-index: 99999;
	}
	.delShow{
		position: absolute;
		top: ;
	}
</style>
